<template>
  <div>
    <label>{{ label }}</label>
    <div>
      <slot></slot>
      <p v-if="errMessage">{{ errMessage }}</p>
    </div>
  </div>
</template>

<script>
import AsyncValidator from "async-validator"
export default {
  name: "LgFormItem",
  inject: ["form"],
  props: {
    label: {
      type: String,
    },
    prop: {
      type: String,
    },
  },
  data() {
    return {
      errMessage: "",
    }
  },
  methods: {
    validate() {
      if (!this.prop) return
      // 获取验证的值
      const value = this.form.model[this.prop]
      // 获取验证规则
      const rules = this.form.rules[this.prop]

      const discriptor = {
        [this.prop]: rules,
      }
      const validator = new AsyncValidator(discriptor)
      return validator.validate({ [this.prop]: value }, (errors) => {
        if (errors) {
          this.errMessage = errors[0].message
        } else {
          this.errMessage = ""
        }
      })
    },
  },
  mounted() {
    this.$on("validate", () => {
      this.validate()
    })
  },
}
</script>

<style></style>
